<!--跳页-->
<script setup>
import {setupMapState} from "@/assets/js/vuexUtils";
import {ElMessageBox} from "element-plus";
import {toRefs} from "vue";
import {useRouter} from "vue-router";

const {currentUid} = setupMapState("Account", ['currentUid']);
const props = defineProps({
  id: {type: Number, required: true},
  totalPage: {type: Number, required: true},
  name: {type: String, required: true},
})
const {id, totalPage, name} = toRefs(props)
const router = useRouter();

// 跳转到指定页
const jumpPage = (name, id, totalPage) => {
  ElMessageBox.prompt(undefined, `请输入目标页数 1 - ${totalPage}`, {
    inputValue: totalPage,
    inputType: "number",
    inputValidator: (value) => {
      if (!value) {
        return false;
      }
      return value >= 1 && value <= totalPage;
    },
    inputErrorMessage: '只能填写指定范围的页数',
  }).then(({value}) => {
    router.push({name, params: {id}, query: {page: value, account: currentUid.value}})
  }).catch(r => {
    console.log(r)
  })
}

</script>

<template>
    <span style="cursor: pointer" @click="jumpPage(name,id,totalPage)">
        <slot></slot>
    </span>
</template>

<style scoped>

</style>